<template>
  <div class="canvasDiv">
    <div class="delete-btn" id="deleteBtn">
      <el-button size="mini" icon="el-icon-delete" @click="deleteNode">删除节点</el-button>
    </div>
    <div class="btn-bar">
      <el-button-group>
        <!--<el-button size="mini" icon="el-icon-rank" @click="fullScreenButton">全屏</el-button>-->
        <el-button size="mini" icon="el-icon-delete" @click="clearAll" :disabled="disabled">全部清空</el-button>
        <el-button size="mini" icon="el-icon-share" @click="treeSort">整理</el-button>
      </el-button-group>
    </div>
    <canvas :id="canvasId"></canvas>
  </div>
</template>

<script>
  export default {
    name: "Jtopo",
    props: {
      //需要还原的节点集合
      nodeList: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      },
      canvasId: {
        type: String,
        default: "canvas"
      }
    },
    created() {
      console.log("disabled: ", this.disabled);
    },
    data() {
      return {
        nodeLinkList: [], // 存放连线对象
        beginNode: null,
        nodeArray: []
      }
    },
    computed: {
      /**计算vuex接口对象**/
      interfaceNode() {
        return this.$store.getters.interfaceNode;
      }
    },
    watch: {
      /**监听接口对象变化，从而生成节点**/
      interfaceNode(item) {
        this.createNode(item);
      }
    },
    mounted() {
      let canvas = document.getElementById(this.canvasId);
      canvas.width = $(".canvasDiv").width();
      canvas.height = $(".canvasDiv").height();
      // 1.创建一个舞台对象
      this.stage = new JTopo.Stage(canvas);
      // 2.创建一个场景对象
      this.scene = new JTopo.Scene(this.stage);
      // 3.设置鼠标缩放比例
      this.stage.wheelZoom = 1.1;

      // let nodeList = [{"parents":[],"children":[{"interfaceNode":{"siaId":"2","siId":"instance1","siaName":"MicroCore框架 退出登录接口","siaPath":"/sys/logout","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架 退出登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"header\",\"typeDesc\":\"\",\"name\":\"token\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"token\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":43,"y":209,"sId":"server1","nodeId":"042f0a66-25c8-4909-aa12-cd3b61e26b79"}},{"interfaceNode":{"siaId":"2","siId":"instance1","siaName":"MicroCore框架 退出登录接口","siaPath":"/sys/logout","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架 退出登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"header\",\"typeDesc\":\"\",\"name\":\"token\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"token\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":304,"y":267,"sId":"server1","nodeId":"ecabf65b-1381-44f1-befc-a50376da2a18"}}],"nodeId":"8f28de76-8fb7-452e-ab32-cbf03707d829","interfaceNode":{"siaId":"1","siId":"instance1","siaName":"MicroCore框架登录接口","siaPath":"/sys/login","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"captcha\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"验证码\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"username\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"账号\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"password\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"密码\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"uuid\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"唯一值\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{\"captcha\":\"string\",\"password\":\"string\",\"username\":\"string\",\"uuid\":\"string\"}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":263,"y":102,"sId":"server1","nodeId":"8f28de76-8fb7-452e-ab32-cbf03707d829"},"x":263,"y":102},{"parents":[{"interfaceNode":{"siaId":"1","siId":"instance1","siaName":"MicroCore框架登录接口","siaPath":"/sys/login","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"captcha\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"验证码\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"username\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"账号\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"password\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"密码\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"uuid\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"唯一值\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{\"captcha\":\"string\",\"password\":\"string\",\"username\":\"string\",\"uuid\":\"string\"}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":263,"y":102,"sId":"server1","nodeId":"8f28de76-8fb7-452e-ab32-cbf03707d829"}}],"children":[],"nodeId":"042f0a66-25c8-4909-aa12-cd3b61e26b79","interfaceNode":{"siaId":"2","siId":"instance1","siaName":"MicroCore框架 退出登录接口","siaPath":"/sys/logout","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架 退出登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"header\",\"typeDesc\":\"\",\"name\":\"token\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"token\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":43,"y":209,"sId":"server1","nodeId":"042f0a66-25c8-4909-aa12-cd3b61e26b79"},"x":43,"y":209},{"parents":[{"interfaceNode":{"siaId":"1","siId":"instance1","siaName":"MicroCore框架登录接口","siaPath":"/sys/login","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"captcha\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"验证码\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"username\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"账号\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"password\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"密码\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"uuid\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"唯一值\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{\"captcha\":\"string\",\"password\":\"string\",\"username\":\"string\",\"uuid\":\"string\"}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":263,"y":102,"sId":"server1","nodeId":"8f28de76-8fb7-452e-ab32-cbf03707d829"}}],"children":[],"nodeId":"ecabf65b-1381-44f1-befc-a50376da2a18","interfaceNode":{"siaId":"2","siId":"instance1","siaName":"MicroCore框架 退出登录接口","siaPath":"/sys/logout","siaHttpMethod":"POST","siaConnectMethod":"REST","siaCreateTime":"2018-10-09T01:35:27.000+0000","siaCreateTimeStr":"2018-10-09 09:35:27","siaCount":0,"siaVersion":"1.0.0","siaIsCross":true,"siaStatus":"正常","siaDesc":"MicroCore框架 退出登录接口","siaIsDelete":false,"siaSign":"zLvRPyZxq0h4Mppo2V9sSA==","siaRequestData":"[{\"parameterizedIndex\":-1,\"httpType\":\"header\",\"typeDesc\":\"\",\"name\":\"token\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"token\"}]","siaResponseData":"{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"统一返回体报文数据结构\",\"name\":\"\",\"detail\":[{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"data\",\"type\":\"object\",\"parameterizedList\":[\"\"],\"leaf\":true,\"isLeaf\":true,\"desc\":\"返回的数据\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"msg\",\"type\":\"string\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"消息\"},{\"parameterizedIndex\":-1,\"httpType\":\"body\",\"typeDesc\":\"\",\"name\":\"status\",\"type\":\"int\",\"parameterizedList\":[],\"leaf\":true,\"isLeaf\":true,\"desc\":\"状态\"}],\"type\":\"ResultDto\",\"parameterizedList\":[\"List\"],\"leaf\":false,\"isLeaf\":false,\"desc\":\"\"}","siaRequestDataJson":"{}","siaResponseDataJson":"{\"data\":{\"expire\":0,\"token\":\"string\"},\"msg\":\"string\",\"status\":0}","siIpAddress":"192.168.43.21","siPort":"10003","siaOpenStatus":"对外开放","siaCodeName":"'testMethod2","siaCodeType":"method","siaIsOpen":false,"siaIsOpenStr":"不对外开放","x":304,"y":267,"sId":"server1","nodeId":"ecabf65b-1381-44f1-befc-a50376da2a18"},"x":304,"y":267}]
      // 4.根据nodeList还原节点
      this.resetNode(this.nodeList);

      //鼠标松开事件
      this.scene.mouseup(e => {
        if(e.target != null && e.target instanceof JTopo.Node) {
          this.createLinkNode(e);
          //判断右键
          if(event.button === 2){
            if (this.disabled) {
              return;
            }
            $("#deleteBtn").css({ top: event.offsetY, left: event.offsetX }).show();
            this.rightClickNode = e.target;
          }
        }
        this.changeSaveNode();
      });

      //鼠标按下事件
      this.scene.mousedown(e => {});

      //鼠标移动事件
      this.scene.mousemove(e => {});

      //鼠标单击事件
      this.scene.click(e => {
        if (e.type === "click" && e.target) {
          console.log("单击：", e.target);
        }
        $("#deleteBtn").hide();
      });

      //鼠标双击事件
      this.scene.dbclick(e => {
        if (e.type === "dblclick" && e.target && e.target.elementType === "link") {
          this.deleteLink(e);
        }
        if (e.type === "dblclick" && e.target && e.target.elementType === "node") {
          this.editNode(e);
        }
      });

    },
    methods: {
      /**根据数据还原节点**/
      resetNode(nodeList) {
        nodeList = nodeList === "" ? [] : JSON.parse(nodeList);
        nodeList.forEach(item => {
          this.createNode(item.interfaceNode);
        });

        let children = [];
        this.scene.childs.forEach(item => {
          if (item.elementType === "node") {
            children.push(item);
          }
        });

        for (let i = 0; i < nodeList.length; i++) {
          for (let j = 0; j < children.length; j++) {
            if (nodeList[i].nodeId === children[j].interfaceNode.nodeId) {
              //遍历父节点
              nodeList[i].parents.forEach(p => {
                for (let k = 0; k < children.length; k++) {
                  if (children[k].interfaceNode.nodeId === p.interfaceNode.nodeId) {
                    this.createLink(children[k], children[j]);
                    break;
                  }
                }
              });

              //遍历子节点
              nodeList[i].children.forEach(p => {
                for (let k = 0; k < children.length; k++) {
                  if (children[k].interfaceNode.nodeId === p.interfaceNode.nodeId) {
                    this.createLink(children[j], children[k]);
                    break;
                  }
                }
              });
              break;
            }
          }
        }
        //调用节点去重方法
        this.unique(this.nodeLinkList);
        //保存节点对象在缓存里面
        this.changeSaveNode();
      },
      /**节点连线去重**/
      unique(array) {
        let allArr = [];
        for (let i = 0; i < array.length; i++) {
          let flag = true;
          for (let j = 0; j < allArr.length; j++) {
            if (array[i].linkNode.nodeA.nodeId === allArr[j].linkNode.nodeA.nodeId
              && array[i].linkNode.nodeZ.nodeId === allArr[j].linkNode.nodeZ.nodeId) {
              this.scene.remove(array[i].linkNode);
              flag = false;
            }
          }
          if (flag) {
            allArr.push(array[i]);
          }
        }
        return allArr;
      },
      /**将节点存入vuex**/
      changeSaveNode() {
        this.$store.commit("nodeList", this.scene.childs);
      },
      /**创建节点方法**/
      createNode(interfaceNode) {
        let nodeName = interfaceNode.siaName ? interfaceNode.siaName : interfaceNode.taskName;
        let circleNode = new JTopo.CircleNode(nodeName);
        circleNode.interfaceNode = interfaceNode;
        circleNode.nodeId = interfaceNode.nodeId;
        circleNode._id = new Date().getTime() + Math.random();
        circleNode.setSize(50, 50);
        console.log(interfaceNode.x, interfaceNode.y);
        circleNode.setLocation(interfaceNode.x, interfaceNode.y);
        circleNode.fillColor = '24,189,244';
        // circleNode.shadow = true;
        // circleNode.shadowBlur = 10;
        // circleNode.shadowOffsetX = 3;
        // circleNode.shadowOffsetY = 3;
        // circleNode.shadowColor = "rgba(0,0,0,0.2)";
        circleNode.fontColor = '0,0,0';
        //延时
        if (interfaceNode.taskDelay !== undefined) {
          circleNode.alarm = "延时：" + interfaceNode.taskDelay;
          circleNode.alarmTextOffsetX = 200;
          circleNode.alarmTextOffsetY = 200;
          circleNode.alarmColor = '255,255,255';
          circleNode.alarmFontColor = '255,255,255';
          circleNode.alarmAlpha = 1;
        }
        //执行状态
        if (interfaceNode.executeStatus !== undefined) {
          let msg = "", color = "";
          if (interfaceNode.executeStatus == 0) {
            msg = "执行中";
            color = "30,144,255";
          }
          if (interfaceNode.executeStatus == 1) {
            msg = "成功";
            color = "60,179,113";
          }
          if (interfaceNode.executeStatus == 2) {
            msg = "失败";
            color = "255,0,0";
          }
          circleNode.alarm = msg;
          circleNode.alarmTextOffsetX = 200;
          circleNode.alarmTextOffsetY = 200;
          circleNode.alarmColor = color;
          circleNode.alarmFontColor = color;
          circleNode.alarmAlpha = 1;
        }
        console.log("circleNode: ", circleNode);
        this.scene.add(circleNode);
        this.beginNode = null;
        this.changeSaveNode();
      },
      /**创建连线**/
      createLink(nodeA, nodeZ) {
        let linkNode = new JTopo.Link(nodeA, nodeZ);
        linkNode.lineWidth = 2;
        linkNode.strokeColor = '64,224,208';
        linkNode.arrowsRadius = 13;
        this.nodeLinkList.push({ beginNode: nodeA, endNode: nodeZ, linkNode: linkNode});
        this.scene.add(linkNode);
      },
      /**手动创建连线**/
      createLinkNode(e) {
        if (this.disabled) {
          return;
        }
        //存放开始节点
        if(this.beginNode == null){
          this.beginNode = e.target;
        }
        //存放结束节点
        else if(this.beginNode !== e.target){
          let endNode = e.target;
          console.log("endNode:", endNode);
          //TODO 判断连线 是否我我的父节点，同时判断是否有我的子节点（递归）

          let linkNode = new JTopo.Link(this.beginNode, endNode);
          linkNode.lineWidth = 2; // 线宽
          linkNode.strokeColor = '64,224,208';
          linkNode.arrowsRadius = 13;
          let flag = false;
          for (let i = 0; i < this.nodeLinkList.length; i++) {
            if ((this.nodeLinkList[i].beginNode._id === this.beginNode._id && this.nodeLinkList[i].endNode._id === endNode._id)
              || (this.nodeLinkList[i].beginNode._id === endNode._id && this.nodeLinkList[i].endNode._id === this.beginNode._id)
            ) {
              this.scene.remove(linkNode);
              flag = true;
              break;
            }
          }

          //判断没有重复的才添加连线
          if (!flag) {
            this.nodeLinkList.push({ beginNode: this.beginNode, endNode: endNode, linkNode: linkNode});
            this.scene.add(linkNode);
          }

          //第一根连接线
          if (this.nodeLinkList.length === 0) {
            this.nodeLinkList.push({ beginNode: this.beginNode, endNode: endNode, linkNode: linkNode});
            this.scene.add(linkNode);
          }
          //树形显示
          //this.treeSort()
          this.changeSaveNode();
          this.beginNode = null;
        }
        else{
          this.beginNode = null;
        }
      },
      /**删除连线**/
      deleteLink(e) {
        if (this.disabled) {
          return;
        }
        this.$confirm('您确定删除此连线?', '确认提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.nodeLinkList.length; i++) {
            if (this.nodeLinkList[i].linkNode._id === e.target._id) {
              this.nodeLinkList.splice(i, 1);
              this.scene.remove(e.target);
              this.changeSaveNode();
              this.beginNode = null;
              break;
            }
          }
        }).catch(() => {});
      },
      /**删除节点**/
      deleteNode() {
        if (this.rightClickNode) {
          this.scene.remove(this.rightClickNode);
          this.rightClickNode = null;
          this.beginNode = null;
          $("#deleteBtn").addClass("active");
          setTimeout(() => {
            $("#deleteBtn").removeClass("active");
            $("#deleteBtn").hide();
          }, 500)
          this.changeSaveNode();
        }
      },
      /**编辑接口详情**/
      editNode(e) {
        this.$emit("clickNodeCall", e.target);
      },
      /**全屏**/
      fullScreenButton() {
        let usablePrefixMethod, kernel = ["webkit", "moz", "ms", "o", ""], method = "RequestFullScreen";
        kernel.forEach((prefix) => {
            if (usablePrefixMethod) return;
            if (prefix === "") {
              // 无前缀，方法首字母小写
              method = method.slice(0,1).toLowerCase() + method.slice(1);
            }
            let typePrefixMethod = typeof this.stage.canvas[prefix + method];
            if (typePrefixMethod + "" !== "undefined") {
              if (typePrefixMethod === "function") {
                usablePrefixMethod = this.stage.canvas[prefix + method]();
              } else {
                usablePrefixMethod = this.stage.canvas[prefix + method];
              }
            }
          }
        );
      },
      /**全部清空**/
      clearAll() {
        this.$emit("clearAllCall");
      },
      /**树形布局**/
      treeSort() {
        this.scene.doLayout(JTopo.layout.TreeLayout('down'));
        this.stage.centerAndZoom();
        this.changeSaveNode();
      }
    }
  }

</script>

<style scoped lang="less">
  .canvasDiv{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .btn-bar{
    position: absolute;
    width: 100%;
    text-align: right;
    top: 5px;
    right: 5px;
  }
  .delete-btn{
    position: absolute;
    z-index: 2;
    display: none;
    transition: all 0.3s;
    transform: scale(1);
    &.active{
      transform: scale(0);
    }
  }
</style>
